<script setup lang="ts">
import useSetting from '@renderer/composables/useSetting'
import { reactive } from 'vue'
import { Action, ElMessageBox } from 'element-plus'
const specList = reactive([
  {
    name: '石膏板规格',
    key: 'gypsum_board',
    unit: '米/长',
  },
  {
    name: '主龙骨规格',
    key: 'main_keel',
    unit: '米/根',
  },
  {
    name: '副龙骨规格',
    key: 'second_keel',
    unit: '米/根',
  },
  {
    name: '边龙骨规格',
    key: 'line_keel',
    unit: '米/根',
  },
  {
    name: '吊丝规格',
    key: 'hang_spring',
    unit: '米/根',
  },
  {
    name: '木方根规格',
    key: 'wood_square_root',
    unit: '米/根',
  },
  {
    name: '木方捆规格',
    key: 'wood_square_tie',
    unit: '根/捆',
  },
  {
    name: '乳胶漆面漆规格',
    key: 'latex',
    unit: 'L',
  },
  {
    name: '线管规格',
    key: 'conduit',
    unit: '米/根',
  },
  {
    name: '水管规格',
    key: 'water_pipe',
    unit: '米/根',
  },
  {
    name: '水路保温管',
    key: 'waterway',
    unit: '米/根',
  },
  {
    name: '木地板规格',
    key: 'wood_floor',
    unit: '平方/块',
  },
])
const handleSave = async () => {
  ElMessageBox.alert('本次修改数据，只对新创建的“模板/预算”生效。', '温馨提示', {
    showCancelButton: true,
    callback: async (action: Action) => {
      if (action == 'confirm') {
        await setMaterial()
      }
    },
  })
}
const { getMaterial, materialInfo, setMaterial } = useSetting()
await getMaterial()
</script>

<template>
  <main
    class="bg-white flex flex-col justify-between rounded-md"
    style="height: -webkit-fill-available"
    v-if="materialInfo">
    <el-form :model="materialInfo" label-width="auto">
      <el-row :gutter="20">
        <el-col v-for="(item, index) in specList" :key="index" :span="12">
          <el-form-item :label="item.name + ':'">
            <el-input v-model="materialInfo[item.key]" type="number" @mousewheel.native.prevent placeholder="请输入">
              <template #append>{{ item.unit }}</template>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="flex justify-center">
      <button class="save-button" @click="handleSave">保存设置</button>
    </div>
  </main>
</template>

<style lang="scss" scoped>
.save-button {
  @apply text-white px-16 py-3 rounded-md;
  background: linear-gradient(142deg, #ff9600 0%, #ffb242 100%);
}
</style>
